// 循环&遍历数组
<template>
  <div>
    <prism language="javascript">
      let arr = Array.of(11, 21, 31, 41, 51, 61);
      arr["yuan"] = "lei"; //在数组里加一个key为yuan,value为lei,但不属于循环
      for (let i = 0; i < arr.length; i++) {
      console.log(i + ": " + arr[i]);
      }
      arr.forEach(function(v, i) {
      //v:形参
      console.log(i + ": " + v);
      });
      for (let k in arr) {
      //局部变量v
      console.log(k + ": " + arr[k]); //输出了key + value  同时也输出了不在循环里的key:yuan和value:lei
      }
      for (let v of arr) {
      console.log(v);
      }
      let narr = arr.map(function(v, i) {
      //map直接给返回值,适用于保留操作后的场景
      console.log(i + ": " + v);
      return (v = v * v);
      });
      console.log(narr);

      arr.forEach((v, i) => {
      //箭头函数版循环数组
      console.log(i + ": " + v);
      });
    </prism>
    <v-btn
      round
      color="success"
      @click="run"
    >
      RUN
    </v-btn>
  </div>
</template>

<script>
import Prism from "vue-prism-component";
export default {
  components: {
    Prism
  },
  methods: {
    run() {
      let arr = Array.of(11, 21, 31, 41, 51, 61);
      arr["yuan"] = "lei"; //在数组里加一个key为yuan,value为lei,但不属于循环
      for (let i = 0; i < arr.length; i++) {
        console.log(i + ": " + arr[i]);
      }
      arr.forEach(function(v, i) {
        //v:形参
        console.log(i + ": " + v);
      });
      for (let k in arr) {
        //局部变量v
        console.log(k + ": " + arr[k]); //输出了key + value  同时也输出了不在循环里的key:yuan和value:lei
      }
      for (let v of arr) {
        console.log(v);
      }
      let narr = arr.map(function(v, i) {
        //map直接给返回值,适用于保留操作后的场景
        console.log(i + ": " + v);
        return (v = v * v);
      });
      console.log(narr);

      arr.forEach((v, i) => {
        //箭头函数版循环数组
        console.log(i + ": " + v);
      });
    }
  }
};
</script>